<template>
  <CellGroup>
    <Cell title="风格配色" label="整体风格配色设置">
      <template slot="extra">
        <i-switch
           size="large"
          :value="this.navTheme === 'dark' && true || false"
          @on-change="onChange">
          <span slot="open">暗色</span>
          <span slot="close">白色</span>
        </i-switch>
      </template>
    </Cell>
    <Cell title="主题色">
      <template slot="label">
        页面风格配色： <a > {{ this.colorFilter(this.primaryColor) }}</a>
      </template>
    </Cell>
  </CellGroup>
</template>
<script>
import { colorList } from '@/components/setting-drawer/settingConfig'
import { mixin } from '@/utils/mixin'

export default {
  mixins: [mixin],
  data () {
    return {}
  },
  filters: {
    themeFilter (theme) {
      const themeMap = {
        'dark': '暗色',
        'light': '白色'
      }
      return themeMap[theme]
    }
  },
  methods: {
    colorFilter (color) {
      const c = colorList.filter(o => o.color === color)[0]
      return c && c.key
    },

    onChange (checked) {
      if (checked) {
        this.$store.dispatch('ToggleTheme', 'dark')
      } else {
        this.$store.dispatch('ToggleTheme', 'light')
      }
    }
  }
}
</script>
